<template>
	<view class="personmaterial">
		<view class="bg"></view>
		<view class="person-tab">
			<view class="left" @click="pageBack">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="title">
				个人资料
			</view>
			<view class="right">

			</view>
		</view>
		<view class="person-box">
			<view class="person-img" >
				<image :src="userimg" mode="" @click="chooseImage"></image>
				<view class="person-title">
					<span @click="chooseImage">
						更换头像
					</span>
				</view>
			</view>
			<view class="person-content-box">
				<view class="person-item">
					<view class="item-title">
						昵称:
					</view>
					<view class="item-content">
						<input v-model="username" type="text" >
					</view>
				</view>
				<view class="person-item">
					<view class="item-title">
						性别:
					</view>
					<view class="item-content">
						<input v-model="usersex" disabled type="text"   @click="click">
						<u-action-sheet :list="list" v-model="show" @click="myselect"></u-action-sheet>
					</view>
				</view>
				<view class="person-item">
					<view class="item-title">
						书龄:
					</view>
					<view class="item-content">
						<input disabled=""  type="text" :value="`${readdays}天`">
					</view>
				</view>
				<view class="person-item">
					<view class="item-title">
						签名:
					</view>
					<view class="item-content">
						<input v-model="usersign" type="text" >
					</view>
				</view>
				<view class="updata">
					<view class="updata-but" @click="updataPerson">
						更新资料
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				userimg: "",
				usersex: "",
				usersign: "",
				list: [{
					text: '保密',
					color: 'black',
				}, {
					text: '男',
					color: 'black',
				}, {
					text: '女',
					color: 'black',
				}],
				isDisabled: true,
				show: false,
				readdays:""
			}
		},
		onShow() {
			let key = uni.getStorageSync("key")
			uniCloud.callFunction({
				name: "mypage",
				data: {
					user_id: key
				},
				success: res => {
					let {
						result: {
							data
						}
					} = res
					console.log(data[0]);
					this.username = data[0].username
					this.userimg = data[0].user_img
					this.usersex = data[0].user_sex
					this.usersign = data[0].user_sign
					let date=new Date(data[0].user_create_time)
					let datatime=new Date(new Date(date).toLocaleDateString()).getTime()		
					let now =new Date(new Date().toLocaleDateString()).getTime()
					this.readdays=Math.floor((now-0-datatime)/86400000)+1
				}
			})
		},
		methods: {
			chooseImage(){
				let that=this
				uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							let filePath = res.tempFilePaths[0];
							const result = uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: String(Math.random()*5).split('.')[1] + '.png',
							})
							result.then(res => {
								//获取到上传到云储存的url地址 
								// this.userimg=`res['fileID']`
								let key=uni.getStorageSync("key")
								that.userimg=res['fileID']
								uniCloud.callFunction({
									name:"updata_head_portrait",
									data:{
										user_id:key,
										user_img:res['fileID']
									},
									success:res=>{
										uni.showToast({
											title:"修改头像成功",
											icon:"none"
										})
									}
								})
							})
						}
					})
			},
			click() {
				this.show=true
			},
			myselect(index){
				this.usersex=this.list[index].text
			},
			updataPerson() {
				let key=uni.getStorageSync("key")
				console.log(key);
				console.log(this.username, this.usersex, this.usersign);
				let username=this.username
				let user_sex=this.usersex
				let user_sign=this.usersign
				if(key.length!=0){
					if(username.length==0 || user_sex.length==0 || user_sign.length==0 ){
						uni.showToast({
							title:"内容不能为空！",
							icon:"none"
						})
						return
					}
					uniCloud.callFunction({
						name:"updata_user_info",
						data:{
							user_id:key,
							username,
							user_sex,
							user_sign
						},
						success:res=>{
							console.log(res);
							uni.showToast({
								title:"更新资料成功",
								icon:"none"
							})
							
						}
					})
				}
				
			},
			pageBack() {
				uni.switchTab({
					url:"../mypage/mypage"
				});
			}
		}
	}
</script>

<style lang="scss">
	.personmaterial {
		input{
			text-align: center;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 0 6rpx;
		}
		.bg {
			background-image: url("../../static/personbg.jpg");
			background-repeat: no-repeat;
			background-size: cover;
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: -1;

		}

		.bg::before {
			content: "";
			position: absolute;
			/* 一定要用绝对定位 */
			width: 100%;
			height: 100%;
			backdrop-filter: blur(110px);
			/* 模糊半径 */
		}

		.person-tab {
			height: 80rpx;
			// box-shadow: 0px 0px 6px -2px black;
			display: flex;
			color: white;

			.left {
				width: 76rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;

			}

			.title {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.right {
				width: 76rpx;
			}
		}

		.person-box {
			height: 94vh;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.person-img {
				height: 250rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 40rpx 0 20rpx 0;
				box-sizing: border-box;
				flex-direction: column;
				.person-title{
					margin-top: 10rpx;
					font-size: 30rpx;
					color: white;
				}
				image {
					border-radius: 50%;
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
		
		.person-content-box {
			flex: 1;
			// background-color: rgba(248, 248, 248, 0.9);
			background-color: #ffffff;
			border-radius: 60rpx 60rpx 0 0;
			box-sizing: border-box;
			padding: 10rpx 5rpx;
			margin-top: 30rpx;
		}

		.updata {
			margin-top: 30rpx;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;

			.updata-but {
				padding: 15rpx 60rpx;
				color: black;
				border: 1px solid white;
				border-radius: 24rpx;
				font-size: 30rpx;
				background-color: #ffa275;
				color: white;
			}
		}

		.person-item {
			display: flex;
			font-size: 34rpx;
			box-sizing: border-box;
			padding: 20rpx 40rpx;
			margin: 20rpx 0;
			
			.item-title {
				width: 100rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #4a4a4a;
				font-size: 36rpx;
				border-bottom: 1px solid #e6e6e6;
				padding-bottom: 20rpx;
			}

			.item-content {
				flex: 1;
				color: black;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				font-size: 36rpx;
				border-bottom: 1px solid #e6e6e6;
				padding-bottom: 20rpx;
			}
		}
	}
</style>